class Tab{
		constructor(str){
			//属性
			this.btn=document.getElementsByTagName('input');
			this.li=document.getElementsByTagName('li');
			//初始化事件
			this.show();
		}
		show(){
			let _this=this;
			for(let i=0; i<this.btn.length;i++){
				this.btn[i].onclick=function(){
					_this.index=i;
					_this.fn(i);	
				};
			}		
		}
		fn(i){
//			console.log(this);//自动转向对象本身
			for(var j=0;j<this.li.length;j++){
				this.btn[j].className='';
				this.li[j].className='';
			}
			this.li[i].className='show';
			this.btn[i].className='active';		
		}
	}
	
	class AutoPlayTab extends Tab{
		constructor(str){
			//继承属性
			super(str);
			this.autoFn();
			this.index=0;
		}
		autoFn(){
			var _this=this;
			
			setInterval(function(){
					_this.index++
					if(_this.index==_this.btn.length){	
						_this.index=0;								
					}
					_this.fn(_this.index);
			},2000);	
		}
	}
	
	
		
	window.onload=function(){
		new AutoPlayTab();
	}










//class tab{
//	constructor (){
//		this.btn = document.getElementsByTagName("input");
//		this.li = document.getElementsByTagName("li");
//		this.index = 0;
//	}
//	
//	show(){
//		var _this = this;
//		for(var i = 0;i<_this.btn.length;i++){
//			this.btn[i].onclick = function () {
//				_this.index = i;
//				_this.fn(i);
//			}
//		}
//	}
//	fn(i){
//		for (var j = 0;j<this.li.length;j++) {
//					this.btn[j].className = '';
//					this.li[j].className = '';
//				}
//				this.li[i].className='show';
//				this.btn[i].className='active';
//	}
//	
//	autofn(){
//		var _this = this;
//		setInterval(function(){
//					_this.index++;
//					if(_this.index==_this.btn.length){	
//						_this.index=0;			
//					}
//					_this.show(_this.index);
//			},2000);
//	}
//}
//
//window.onload = function(){
//	var n = new tab();
//	n.show();
//	n.autofn();
//}











//window.onload = function () {
//	
//	var btn = document.getElementsByTagName("input");
//	var li = document.getElementsByTagName("li");
//	for(var i = 0;i<btn.length;i++){
//		btn[i].index=i;
//		btn[i].onclick = function () {
//			for (var i = 0;i<li.length;i++) {
//				btn[i].className = '';
//				li[i].style.display = 'none';
//			}
//			this.className = 'active';
//			li[this.index].style.display = 'block';
//			
//		}		
//	}
//	var timer = null;
//				console.log(btn[i].index);
//				timer=setInterval(function () {
//					btn[i].index++;
//			},2000)
//}